<template>
	<view>
		<!-- 第一部分-顶部 -->
		<view class="items">
			<view class="item">
				<view class="item-xs">推荐</view>
				<view class="item-x">千里眼</view>
				<view class="item-x">搞笑</view>
				<view class="item-x">娱乐</view>
				<view class="item-x">社会</view>
				<view class="item-x">音乐</view>
				<view class="item-x">科技</view>
			</view>
		</view>
		<view class="item-ss"></view>

		<!-- 第二部分-视频1 -->
		<view class="sp">
			<navigator url="../videocontent/videocontent">
				<view class="x">600斤的公牛不甘心被杀，宁愿跳进大河之中，结局令人遗憾</view>
			</navigator>
			<video class="y" style="width: 100%;height: 400rpx;"
				src="https://webstatic.mihoyo.com/upload/static-resource/2022/10/23/dc7c2830f49649baf304ffc59259e0bf_3577994317405005347.mp4"></video>
			<view class="dibu">
				<view class="wenzi">
					<view class="wenzizf">
						<image src="../../../static/logo.png" style="width: 45rpx;height: 45rpx;"></image>
					</view>
					<view class="wenzizf" style="font-size: 32rpx;">开心哈哈大笑...</view>
					<view class="wenzizf" style="color: #999999;margin-top: 0rpx;">|</view>
					<view class="wenzizf" style="font-size: 32rpx;color: #DD524D;font-weight: bold;">关注</view>
				</view>
				<view class="tupian">
					<view class="tupiandx">
						<image style="width: 35rpx;height: 35rpx;" src="../../../static/logo.png"></image>
					</view>
					<view class="tupiandx">
						<image style="width: 35rpx;height: 35rpx;" src="../../../static/logo.png"></image>
					</view>
					<view class="tupiandx" style="margin-top: -10rpx;padding-right: 20rpx;">...</view>
				</view>
			</view>
		</view>
		<!-- 第二部分-视频2 -->
		<view class="sp">
			<navigator url="../videocontent/videocontent">
				<view class="x">这些箱子里装的中高档卷烟共有1350余条、27万余支</view>
			</navigator>
			<video class="y" style="width: 100%;height: 400rpx;"
				src="https://yjwujian.v.netease.com/2022/0727/ac0881a94e40301c6f539a2e2ebc4c8cqt.mp4"></video>
			<view class="dibu">
				<view class="wenzi">
					<view class="wenzizf">
						<image style="width: 45rpx;height: 45rpx;" src="../../../static/logo.png" mode=""></image>
					</view>
					<view class="wenzizf" style="font-size: 32rpx;">往事随风去...</view>
					<view class="wenzizf" style="color: #999999;margin-top: 0rpx;">|</view>
					<view class="wenzizf" style="font-size: 32rpx;color: #DD524D;font-weight: bold;">关注</view>
				</view>
				<view class="tupian">
					<view class="tupiandx">
						<image src="../../../static/logo.png" style="width: 35rpx;height: 35rpx;" mode=""></image>
					</view>
					<view class="tupiandx">
						<image src="../../../static/logo.png" style="width: 35rpx;height: 35rpx;" mode=""></image>
					</view>
					<view class="tupiandx" style="margin-top: 10rpx;padding-right: 20rpx;">...</view>
				</view>
			</view>
		</view>

		<!-- 第二部分-视频3 -->
		<view class="sp">
			<navigator url="../videocontent/videocontent">
				<view class="x">一个"背包客"，从郑州坐火车往返江南某市.....</view>
			</navigator>
			<video class="y" style="width: 100%;height: 400rpx;"
				src="https://blz-videos.nosdn.127.net/1/World%20of%20Warcraft/%E3%80%8A%E9%AD%94%E5%85%BD%E4%B8%96%E7%95%8C%E3%80%8B%EF%BC%9A%E2%80%9C%E5%B7%A8%E9%BE%99%E6%97%B6%E4%BB%A3%E2%80%9D%E5%89%8D%E5%A4%95%E5%86%85%E5%AE%B9%E6%9B%B4%E6%96%B0%E7%94%9F%E5%AD%98%E6%8C%87%E5%8D%97.mp4"></video>
			<view class="dibu">
				<view class="wenzi">
					<view class="wenzizf">
						<image style="width: 45rpx;height: 45rpx;" src="../../../static/logo.png" mode=""></image>
					</view>
					<view class="wenzizf" style="font-size: 32rpx;">微笑面对一切...</view>
					<view class="wenzizf" style="color: #999999;margin-top: 0rpx;">|</view>
					<view class="wenzizf" style="font-size: 32rpx;color: #DD524D;font-weight: bold;">关注</view>
				</view>
				<view class="tupian">
					<view class="tupiandx">
						<image src="../../../static/logo.png" style="width: 35rpx;height: 35rpx;" mode=""></image>
					</view>
					<view class="tupiandx">
						<image src="../../../static/logo.png" style="width: 35rpx;height: 35rpx;" mode=""></image>
					</view>
					<view class="tupiandx" style="margin-top: -10rpx;padding-right: 20rpx;">...</view>
				</view>
			</view>
		</view>

		<!-- 第二部分-视频4 -->
		<view class="sp">
			<navigator url="../videocontent/videocontent">
				<view class="x">原来，4月24日，该局执法人员奔赴江南某市，在江南某市火车站</view>
			</navigator>
			<video class="y" style="width: 100%;height: 400rpx;"
				src="https://nie.v.netease.com/nie/2022/0926/71e5ab85325ab1c775ed85839ea0174e.mp4"></video>
			<view class="dibu">
				<view class="wenzi">
					<view class="wenzizf">
						<image src="../../../static/logo.png" style="width: 45rpx;height: 45rpx;" mode=""></image>
					</view>
					<view class="wenzizf" style="font-size: 32rpx;">每天开开心心...</view>
					<view class="wenzizf" style="color: #999999;margin-top: 0rpx;">|</view>
					<view class="wenzizf" style="font-size: 32rpx;color: #DD524D;font-weight: bold;">关注</view>
				</view>
				<view class="tupian">
					<view class="tupiandx">
						<image src="../../../static/logo.png" style="width: 35rpx;height: 35rpx;" mode=""></image>
					</view>
					<view class="tupiandx">
						<image src="../../../static/logo.png" style="width: 35rpx;height: 35rpx;" mode=""></image>
					</view>
					<view class="tupiandx" style="margin-top: -10rpx;padding-right: 20rpx;">...</view>
				</view>
			</view>
		</view>

		<!-- 第二部分-视频5 -->
		<view class="sp">
			<navigator url="../videocontent/videocontent">
				<view class="x">新郑市烟草与公安部门顺藤摸瓜，连夜驱车奔赴江南某市</view>
			</navigator>
			<video class="y" style="width: 100%;height: 400rpx;"
				src="https://yys.v.netease.com/2022/0728/8d5fae8d998cd99e8aa42c304d7664e2qt.mp4"></video>
			<view class="dibu">
				<view class="wenzi">
					<view class="wenzizf">
						<image src="../../../static/logo.png" style="width: 45rpx;height: 45rpx;" mode=""></image>
					</view>
					<view class="wenzizf" style="font-size: 32rpx;">一起开玩耍吧...</view>
					<view class="wenzizf" style="color: #999999;margin: 0rpx;">|</view>
					<view class="wenzizf" style="font-size: 32rpx;color: #DD524D;font-weight: bold;">关注</view>
				</view>
				<view class="tupian">
					<view class="tupiandx">
						<image style="width: 35rpx;height: 35rpx;" src="../../../static/logo.png" mode=""></image>
					</view>
					<view class="tupiandx">
						<image style="width: 35rpx;height: 35rpx;" src="../../../static/logo.png" mode=""></image>
					</view>
					<view class="tupiandx" style="margin-top: -10rpx;padding-right: 20rpx;">...</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {

			}
		},
		methods: {

		}
	}
</script>

<style>
	.items {
		background-color: #ffffff;
		position: fixed;
		/* 固定位置设置新闻条的时候用 */
		z-index: 1;
		/* 显示层级，设置在最上层显示 */

		width: 100%;
		top: 90rpx;
	}

	.item {
		background-color: #ffffff;
		display: flex;
		/* 显示在一行，弹性布局 */
		flex-direction: row;
		/* 在一行显示，两个同时用才会显示在一行 */
		margin: 5rpx 10rpx 20rpx 10rpx;
		font-size: 40rpx;
		color: #333333;
		margin-bottom: 20rpx;
	}

	.item-x {
		padding: 0rpx 15rpx;
	}

	.item-ss {
		width: 100%;
		height: 60rpx;
	}

	.tab_title view {
		display: inline-block;
		margin-left: 30rpx;
		line-height: 30rpx;
		color: #ffffff;
	}

	.dibu {
		display: flex;
		flex-direction: row;
		justify-content: space-between;
		-webkit-justify-content: space-between;
		margin-top: 30rpx;
		margin-bottom: 20rpx;
	}

	.wenzi {
		display: flex;
		flex-direction: row;
	}

	.tupian {
		display: flex;
		flex-direction: row;
	}

	.tupiandx {
		margin-left: 60rpx;
	}

	.wenzizf {
		margin-right: 20rpx;
	}

	.x {
		margin-top: 30rpx;
		margin-bottom: 30rpx;
	}

	.item-xs {
		color: #dd524d;
		font-weight: bold;
	}

	.a {
		margin-right: 120rpx;
		height: 50rpx;
	}

	.ap image {
		width: 250rpx;
		height: 100rpx;
	}

	.ap {
		border-radius: 10rpx;
		width: 250rpx;
		height: 100rpx;
		overflow: hidden;
		margin: auto;
	}

	.scroll_x {
		height: 50rpx;
		width: 100%;
		white-space: nowrap;
	}

	.item {
		display: flex;
		flex-direction: row;
		justify-content: space-between;
		color: #333333;
		background-color: #ffffff;
		border-bottom: 1rpx solid #c8c7cc;
	}

	.tab_title {
		display: inline-block;
		margin-left: 10rpx;
		height: 80rpx;
		line-height: 70rpx;
		color: #333333;
		background-color: #ffffff;
		border-bottom: 1rpx solid #c8c7cc;
	}

	.tab_x {
		color: #333333;
		background-color: #ffffff;
	}

	.scroll_x {
		height: 60rpx;
		width: 100%;
		white-space: nowrap;
	}

	.gray {
		color: #c8c7cc;
	}

	.gray1 {
		color: #dd524d;
	}

	.hd {
		display: inline-block;
	}

	.tab {
		background-color: #dd524d;
	}

	.shgd {
		position: fixed;
		position: absolute;
		z-index: 1;
	}

	.scroll-view::-webkit-scrollbar {
		display: none;
		width: 0;
		height: 0;
		color: transparent;
	}

	.sp {
		border-bottom: 1px solid #e5eaf3;
		margin: 10rpx 10rpx 20rpx 20rpx;
	}

	.reg-right {
		color: #dd524d;
		margin-right: 10rpx;
		margin-left: 10rpx;
	}

	.z {
		display: flex;
		flex-direction: row;
		justify-content: space-between;
		margin-bottom: 30rpx;
		margin-top: 20rpx;
		height: 70rpx;
	}

	.zs {
		display: flex;
	}

	.z1 {
		margin-bottom: 10rpx;
		margin-right: 300rpx;
		margin-top: 20rpx;
	}

	.z-h {
		height: 60rpx;
		margin-right: 10rpx;
		display: flex;
		flex-direction: row;
		font-size: 35rpx;
	}

	.z-z {
		font-size: 30rpx;
		color: #c8c7cc;
	}

	.z-z1 {
		font-size: 30rpx;
		color: #c8c7cc;
		margin: 20rpx;
	}

	.z-z2 {
		font-size: 30rpx;
		color: #c8c7cc;
		margin: 20rpx;
	}

	.y {
		margin: 0rpx;
		float: 1;
	}
</style>
